<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 490px;
            display: flex;
            margin:auto ;
            flex-wrap: wrap;
            padding: 0;
            list-style: none;
        }
        li{
            width: 70px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            background-color: #333;
        }
    </style>
</head>
<body>
    <ul id="list">
        
    </ul>

    <script>

        // 日历分3部分
        //   本月的天数
        //   上个月的部分天数
        //        经过观察，发现规律  -- 上个月的第一天   上个月的最后一天   本月的第一天是星期几  
        //            发现 日历上显示的上个月的第一天 = 上个月的最后一天 - 本月的第一天是星期几 + 2
        //   下个月的天数


        renderList() ;





        



        // 获取上本月的天数
        function getNowDays() {
            var date = new Date() ;
            // 日期推到下个月
            date.setDate(32) ;
            // 推到上个月的第0天 -- 也就是本月的最后一天
            date.setDate(0) ;
            // 获取本月的最后一天
            var maxDay = date.getDate() ;
            var arr = [] ;
            for(var i = 1 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }

        console.log(getNowDays()) ;


        // 求上个月的天数
        function getPrevDays() {
            var date = new Date() ;
            // 求本月的第一天是星期几
            date.setDate(1) ;
            var week = date.getDay() ;
            // 上个月的最后一天  -- 也就是本月的第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            var arr = [] ;
            // 经过发现的规律，上个月所显示的第一天是 。。。。
            for(var i = maxDay - week + 2 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }

        console.log(getPrevDays())


        // 求下个月的天数   42 - 上个月的天数 - 本月的天数
        function getNextDays() {
            var arr = [] ;
            for(var i = 1 ; i <= 42 - getPrevDays().length - getNowDays().length ; i++) {
                arr.push(i) ;
            }
            return arr
        }

        console.log(getNextDays())



        // 动态生成li
        function renderList() {
            var res = '' ;
            var prevDaysArr = getPrevDays() ;
            var nowDaysArr = getNowDays() ;
            var nextDaysArr = getNextDays() ;
            for(var i = 0 ; i < prevDaysArr.length ; i++) {
                res += `<li style="color:gray;">${prevDaysArr[i]}</li>`
            }
            for(var i = 0 ; i < nowDaysArr.length ; i++) {
                res += `<li style="color:white;">${nowDaysArr[i]}</li>`
            }
            for(var i = 0 ; i < nextDaysArr.length ; i++) {
                res += `<li style="color:gray;">${nextDaysArr[i]}</li>`
            }
            // return res ;
            var oUl = document.getElementById('list') ;
            oUl.innerHTML = res ;
        }

    </script>







</body>
</html>